<template>
	<view class="page">
		<image @click="toPublish()" src="http://8.155.28.7:45/group1/M00/00/00/rBLpe2dXlRSAFFqhAAIHvGPuxeg573.jpg"
			style="width:750rpx;height:230rpx;" />
		<view style="display:flex;flex-wrap:wrap;margin-top:30rpx;">
			<view style="width:33%;text-align:center;margin-bottom:30rpx;">
				<image src="http://8.155.28.7:45/group1/M00/00/00/rBLpe2dVo3qAXKuAAAA0_B5_xks490.png"
					style="width:120rpx;height:120rpx;" />
				<view class="">
					全部
				</view>
			</view>
			<view style="width:33%;text-align:center;margin-bottom:30rpx;" v-for="item in typeData">
				<image :src="item.icon" style="width:120rpx;height:120rpx;" />
				<view class="">
					{{item.title}}
				</view>
			</view>
		</view>
		<!-- 页面内容 -->
		<view style="background-color: #fff;border-radius: 20rpx;margin:30rpx 40rpx;padding:30rpx;"
			v-for="item in taskListData" :key="item.id">
			<view style="margin-bottom:12rpx;display:flex;justify-content: space-between;align-items: center;">
				<view style="font-size:30rpx;"> 任务编号：{{item.taskNumber||""}} </view>
				<!-- 1接单中 2施工中 3已完工 4已评价 9已删除 -->
				<view :style="{background:item.taskState==1?'#3D99F5':'#19be6b'}"
					style="width:120rpx;height:48rpx;border-radius:24rpx;font-size: 24rpx;color: #FFFFFF;text-align:center;line-height:48rpx;">
					{{item.taskState==1?'接单中':'已接单'}}
				</view>
			</view>
			<u-line margin="20rpx 0" color="#E1E8FB" />
			<u-row style="line-height:60rpx;">
				<u-col :span="4">
					<text style="color:#999;">工种</text><br /><text
						style="font-size:35rpx;">{{item.taskTypeName||'无'}}</text>
				</u-col>
				<u-col :span="4">
					<text style="color:#999;">预算(元)</text><br /><text
						style="font-size:35rpx;">{{item.budget||'无'}}</text>
				</u-col>
				<u-col :span="4">
					<text style="color:#999;">工期(天)</text><br /><text
						style="font-size:35rpx;">{{item.duration||'无'}}</text>
				</u-col>
			</u-row>
			<view v-if="item.taskAddress"
				style="margin-top:30rpx;letter-spacing:2rpx;font-size:30rpx;color:#484f68;display:flex;align-items:center;">
				<u-icon name="map" style="margin-right:4rpx;"></u-icon>{{item.taskAddress||""}}
			</view>
			<view style="line-height: 40rpx;color:#9195a4;margin-top:30rpx;">{{item.introduction||'该订单无特殊招工要求'}}</view>
			<u-line margin="20rpx 0" color="#E1E8FB" />
			<view style="display:flex;align-items:center;justify-content:space-between">
				<view style="color:#BFBFBF;"> {{item.createDate}} </view>
				<view :style="{color:item.taskState==1?'#3D99F5':'#19be6b'}" @click="toDetail(item)">
					<u-icon name="order" style="margin-right:6rpx;"></u-icon>任务详情
				</view>
			</view>
		</view>
		<view style="height:30rpx;"> </view>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				typeData: [],
				userInfo: {},
				taskListData: [],
			}
		},
		onLoad() {
			this.getUserInfo()
			// 任务类型
			this.$u.api.tasktypeAll({}).then(res => {
				if (res.code == 200) {
					this.typeData = res.items
				}
			})
		},
		onShow() {
			this.getTaskData()
		},
		methods: {
			// 任务数据
			getTaskData() {
				this.$u.api.taskFromHome().then(res => {
					this.taskListData = res.items
				})
			},
			getUserInfo() {
				this.$u.api.getLoginUser().then(res => {
					if (!!res.item) {
						uni.setStorageSync('user', res.item.user)
						uni.setStorageSync('login', res.item.login)
					} else {
						uni.redirectTo({
							url: '/pages/login/index'
						});
					}
				})
			},
			dingwei() {
				let that = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						that.$u.api.latAndLngToCity({
							longitude: res.longitude,
							latitude: res.latitude
						}).then(re => {
							console.log(re.item)
							that.$set(that.userInfo, "city", re.item.regeocode.addressComponent.city)
							uni.setStorageSync('user', that.userInfo)
							that.$u.api.userUpdate(that.userInfo).then(ss => {})
						})
					}
				});
			},
			// 任务详情页
			toDetail(item) {
				uni.navigateTo({
					url: '/pages/order/homeTaskDetail?id=' + item.id
				});
			},
			toPublish() {
				uni.switchTab({
					url: '/pages/home/publish'
				});
			}
		}
	}
</script>
<style lang='scss' scoped>
	.page {
		min-height: 100vh;
		background-color: #F6F9FF;
		font-size: 27rpx;
	}
</style>
